import React from 'react';
import * as routerActions from 'react-router-redux';
import { connect } from 'react-redux';
import { Form, Input, message, Button } from 'antd';
import Api from 'Utils/api';
import { setUserInfo } from 'Actions/userAction';
import { API_HOST } from 'Constants/config';
import './index.scss';

const FormItem = Form.Item;

class LoginPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      userName: '',
      userPwd: '',
      verification: '',
      seconds: 0,
    };
    this.changeUserName = ::this.changeUserName;
    this.changeUserPwd = ::this.changeUserPwd;
    this.changeVerfication = ::this.changeVerfication;
    this.login = ::this.login;
    this.onChange = ::this.onChange;
  }
  componentDidMount() {
    this.onChange();
  }
  changeUserName(e) {
    this.setState({
      userName: e.target.value,
    });
  }
  changeUserPwd(e) {
    this.setState({
      userPwd: e.target.value,
    });
  }
  changeVerfication(e) {
    this.setState({
      verification: e.target.value,
    });
  }
  onChange() {
    this.setState({
      seconds: new Date().getSeconds()
    });
  }
  handleKeyDown(e) {
    if (e.keyCode === 13) {
      this.login();
    }
  }
  login() {
    const { userName, userPwd, verification } = this.state;
    console.log(userName, userPwd, verification);
    const api = new Api({
      method: 'POST',
      path: '/login/passwd',
      data: {
        username: userName,
        password: userPwd,
        captcha: verification
      },
      success: (json) => {
        this.props.dispatch(setUserInfo(json));
        this.props.dispatch(routerActions.push('/system/visual/shian'));
        message.success('登入成功');
      },
      error: (msg) => {
        message.error(msg);
        this.onChange();
      }
    });
    api.run();
  }

  render() {
    const { userName, userPwd, verification, seconds } = this.state;
    return (
      <div className="login-wrapper" >
        <div className="login-container" >
          <img src="images/page/login_computer.png" alt="" />
          <div className="login-content">
            <div className="login-content-title">
              用户登录
            </div>
            <div className="login-input">
              <Form layout={'horizontal'}>
                <FormItem label="用户名" >
                  <Input onChange={this.changeUserName} value={userName} placeholder="请输入用户名" />
                </FormItem >
                <FormItem label="密码" >
                  <Input onChange={this.changeUserPwd} value={userPwd} placeholder="请输入密码" type="password" />
                </FormItem >
                <FormItem label="验证码" >
                  <Input
                    onChange={this.changeVerfication}
                    value={verification}
                    className="login-Verification"
                    placeholder="请输入验证码"
                    style={{ verticalAlign: 'top' }}
                    onKeyDown={this.handleKeyDown.bind(this)}
                  />
                  <div className="Verification-code" id="CetificateContainer"><img className="verification-img" src={`${API_HOST}/captchas?${seconds}`} alt="验证码图" id="Verification" /></div><span className="Verification-change" onClick={this.onChange}>换一张</span>
                </FormItem >
              </Form>
              <Button className="login-btn" onClick={this.login}>登录</Button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
    ...state.userReducer,
  };
}
export default connect(mapStateToProps)(LoginPage);
